
import React, { PureComponent } from 'react'

import { Select, Cascader, Form, Input, Row, Col, Button, Checkbox } from 'antd';
import { connect } from 'react-redux'
import { getAreaJson } from "@sagas/common";
import ImageUpload from "@common/presentational/ImageUpload";
import { businessType } from '@constants/BusinessType'
const FormItem = Form.Item;
import PageBackHeader from "@common/PageBackHeader";
import { withRouter } from 'react-router-dom'
import { alipayApply } from "@sagas/payment";
import { getHistoryMatchParams } from "@utils/setUrlQuery";

const getReformedData = (data) => {
    const _data = {
        ...data
    }
    return {
        ..._data,
        mccCode:''
    }
}

const initialValue = {
    name: '',
}
@connect(
    null
    , {
        getAreaJson,
        alipayApply
    })
@withRouter
class PaymentAlipayCreate extends PureComponent {

    constructor(props) {
        super(props);
        const { location } = props
        const { id } = getHistoryMatchParams(props)
        const { state } = location
        this.state = {
            id,
            formData: id ? {
                ...initialValue,
                ...getReformedData(state),
            } : {
                ...initialValue
            }
        }
        this.formRef = React.createRef()

        this.handleSubmit = this.handleSubmit.bind(this)
        this.submitForm = this.submitForm.bind(this)
        this.cancelFunc = this.cancelFunc.bind(this)
    }

    componentDidMount() {
        this.props.getAreaJson()
    }

    handleSubmit(values) {
        const { id } = this.state
        let params = {
            info:{
                contactName: values.contactName,
                contactMobile: values.contactMobile,
                contactEmail: values.contactEmail,
                mccCode: values.mccCode,
                rate: "0.6",
                signAndAuth: true,
                businessLicenseNo: values.businessLicenseNo,
                businessLicensePic: values.businessLicensePic,
                // "longTerm": true,
                // "dateLimitation": "string",
                shopScenePic: values.shopScenePic,
                shopSignBoardPic: values.shopSignBoardPic
            }
        }
        if(values.specialLicensePic){
            params.info.specialLicensePic = values.specialLicensePic
        }
        if (id) {
            params.id = id
        }
        this.props.alipayApply({
            ...params,
        }, () => {
            this.cancelFunc()
        })
    }

    submitForm() {
        this.formRef.current?.submit()
    }

    filter(inputValue, path) {
        return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
    }

    cancelFunc() {
        this.props.goBack ? this.props.goBack('/payment/wechat') : this.props.history.goBack('/payment/wechat')
    }

    render() {
        const { formData, id } = this.state
        const isEdit = !!id
        return (
            <div className="bilin-web">
                <PageBackHeader title={isEdit ? '编辑收款账号' : '新建收款账号'} />
                <div className="bilin-web-body form-page with-footer">
                    <Form
                        ref={this.formRef}
                        name="payment-edit"
                        labelCol={{ span: 4 }}
                        wrapperCol={{ span: 20 }}
                        initialValues={formData}
                        scrollToFirstError={{
                            behavior: actions =>
                                actions.forEach(({ el, top, left }) => {
                                    el.scrollTop = top - 100
                                    el.scrollLeft = left
                                }),
                        }}
                        onFinish={this.handleSubmit}
                    >
                        <div className="ft-16 pdt-36 pdb-36">经营信息</div>
                        <FormItem
                            label="经营类目: "
                            name='mccCode'
                            rules={[
                                { required: true, message: '请选择行业属性', },
                            ]}
                        >
                            <Cascader
                                options={businessType}
                                placeholder="请选择行业属性"
                                showSearch={{ filter: this.filter }}
                                changeOnSelect
                            />
                        </FormItem>
                        <Form.Item
                            label='营业执照'
                            name='businessLicensePic'
                        >
                            <ImageUpload
                                accept='image/png, image/jpeg, image/jpg'
                                maxFileSize="2m"
                                uploadIntro={(
                                    <div className="ft-12 ft-clr-ml mgl-16" style={{ width: '340px' }}>
                                        请上传证件的彩色扫描件或拍摄照片，黑白复印件需加盖公章；<br />
                                        保证图片信息完整清晰，不得添加无关水印，不接受二次处理
                                    </div>
                                )}
                            />
                        </Form.Item>
                        <FormItem
                            label="营业执照号码: "
                            name='businessLicenseNo'
                            rules={[
                                { required: true, message: '请输入营业执照号码', },
                            ]}
                        >
                            <Input placeholder="请输入营业执照号码" />
                        </FormItem>
                        <Form.Item
                            label='企业特殊资质'
                            name='specialLicensePic'
                        >
                            <ImageUpload
                                accept='image/png, image/jpeg, image/jpg'
                                maxFileSize="2m"
                                uploadIntro={(
                                    <div className="ft-12 ft-clr-ml mgl-16" style={{ width: '340px' }}>
                                        请根据商户经营业务要求是否需要提供相关资质（最多5张）<br />
                                        <a target='_blank' href="https://kf.qq.com/faq/190610B7baQb190610NN3mQN.html" >查看特殊资质</a>
                                    </div>
                                )}
                            />
                        </Form.Item>
                        <Form.Item
                            label='店铺内景照片'
                            name='shopScenePic'
                        >
                            <ImageUpload
                                accept='image/png, image/jpeg, image/jpg'
                                maxFileSize="2m"
                                uploadIntro={null}
                            />
                        </Form.Item>
                        <Form.Item
                            label='店铺门头照片'
                            name='shopSignBoardPic'
                        >
                            <ImageUpload
                                accept='image/png, image/jpeg, image/jpg'
                                maxFileSize="2m"
                                uploadIntro={null}
                            />
                        </Form.Item>
                        <div className="ft-16 pdt-36 pdb-36">联系人信息</div>
                        <FormItem
                            label="姓名: "
                            name='contactName'
                            rules={[
                                { required: true, message: '请输入姓名', },
                            ]}
                        >
                            <Input placeholder="请输入姓名" />
                        </FormItem>
                        <FormItem
                            label="手机号: "
                            name='contactMobile'
                            rules={[
                                { required: true, message: '请输入手机号', },
                            ]}
                        >
                            <Input placeholder="请输入手机号" maxLength={11} />
                        </FormItem>
                        <FormItem
                            label="邮箱: "
                            name='contactEmail'
                            rules={[
                                { required: true, message: '请输入邮箱', },
                            ]}
                        >
                            <Input placeholder="请输入邮箱" />
                        </FormItem>

                    </Form>
                </div>
                <div className="bilin-web-footer">
                    <Button type="primary" ghost onClick={this.cancelFunc}>取消</Button>
                    <Button type="primary" onClick={this.submitForm}>{isEdit ? '确定修改' : '保存'}</Button>
                </div>
            </div>

        )
    }
}

export default PaymentAlipayCreate